<template>
  <el-card>
    <el-row>
      <el-col :span="24">
        <el-descriptions :column="3">
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="活动编码" />
            </template>
            {{ data.no }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="活动名称" />
            </template>
            {{ data.name }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="活动时间" />
            </template>
            {{ data.activeDate }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="活动人数" />
            </template>
            {{ data.menNum }}男{{ data.womenNum }}女
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="活动费用" />
            </template>
            ￥{{ data.activeCost }}/人
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="费用分摊" />
            </template>
            <dict-tag
              v-if="data.status != undefined"
              :type="DICT_TYPE.COST_SHARE"
              :value="data.costShare"
            />
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="截止时间" />
            </template>
            {{ formatDate(Number(data.deadline)) }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="活动描述" />
            </template>
            {{ data.activeDesc }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="活动来源" />
            </template>
            <dict-tag
              v-if="data.status != undefined"
              :type="DICT_TYPE.ACTIVITYTYPE"
              :value="data.activeSource"
            />
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="创建人" />
            </template>
            {{ data.head }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="创建时间" />
            </template>
            {{ formatDate(data.createTime) }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="状态" />
            </template>
            <dict-tag
              v-if="data.status != undefined"
              :type="DICT_TYPE.ACTIVITY_STATUS"
              :value="data.status"
            />
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="活动封面" />
            </template>

            <el-image
              class="h100px w160px rd"
              :src="data.activeCover"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :preview-src-list="[data.activeCover]"
              :initial-index="4"
              fit="cover"
            />
          </el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>
  </el-card>

  <el-card class="mt3">
    <el-table :data="data.packageProductRespVOList" style="width: 100%">
      <el-table-column prop="productName" label="商品名称" align="center" />
      <el-table-column prop="merchantName" label="商家" align="center" />
      <el-table-column prop="supplyPrice" label="价格(元)/人" align="center" />
      <!-- <el-table-column prop="numberCopies" label="商品份数" align="center" /> -->
      <el-table-column prop="writeOffCode" label="详情" align="center">
        <template #default="scoped">
          <el-popover placement="left" :width="600">
            <template #reference>
              <span class="cursor-pointer color-blue">查看</span>
            </template>
            <template #default>
              <ProductInfo :data="scoped.row" />
            </template>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>
<script setup lang="ts">
import { formatDate } from '@/utils/formatTime'
import { DICT_TYPE } from '@/utils/dict'
import ProductInfo from './ProductInfo.vue'

const { data } = defineProps<{ data }>()
</script>
<style scoped lang="scss">
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
